<template>
    <view class="main-contanier">
        <view class="form-wrap">
            <uni-forms ref="valiForm" :modelValue="valiFormData">
                <!-- 原密码 -->
                <uni-forms-item label-align="right" :label-width="labelWidth" label="原密码" required name="raw_password">
                    <uni-easyinput prefixIcon="locked-filled" v-model="valiFormData.raw_password" placeholder="请输入原密码" />
                </uni-forms-item>

                <!-- 新密码 -->
                <uni-forms-item label-align="right" :label-width="labelWidth" label="新密码" required name="new_password">
                    <uni-easyinput prefixIcon="locked" v-model="valiFormData.new_password" placeholder="请输入新密码" />
                </uni-forms-item>

                <!-- 确认密码 -->
                <uni-forms-item label-align="right" :label-width="labelWidth" label="确认密码" required name="repassword">
                    <uni-easyinput prefixIcon="locked-filled" v-model="valiFormData.repassword" placeholder="请输入确认密码" />
                </uni-forms-item>
            </uni-forms>


            <view class="btn-wrap">
                <text class="btn" @click="handlerSave">保 存</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { useUserStore } from '@/stores'



// 用户存储
const userStore = useUserStore()

const valiFormData = reactive({
	raw_password: '',
	new_password: '',
	repassword: '',
})

const labelWidth:any = ref('140rpx')


// 保存数据
const handlerSave = async () => {
    if (valiFormData.raw_password == '') {
        uni.showToast({
            icon: 'none',
            title: '请输入原密码',
        })
        return false
    }

    if (valiFormData.new_password == '') {
        uni.showToast({
            icon: 'none',
            title: '请输入新密码',
        })
        return false
    }

    if (valiFormData.new_password != valiFormData.repassword) {
        uni.showToast({
            icon: 'none',
            title: '两次密码不一致',
        })
        return false
    }
    
    await userStore.changePassword(valiFormData)
    uni.showToast({
        title: '修改成功',
        duration: 1000
    })
    setTimeout(() => {
        uni.redirectTo({url: '/pagesUser/user_set/index'})
    }, 1000)
}
</script>

<style lang="scss">
    .main-contanier {
        padding: 20rpx 10rpx 0 10rpx;
        .form-wrap {
            background-color: #fff;
            padding: 10rpx;
        }

        .btn-wrap {
            padding-top: 10rpx;
            padding-bottom: 20rpx;
            display: flex;
            justify-content: center;
            .btn {
                display: block;
                width: 600rpx;
                height: 70rpx;
                line-height: 70rpx;
                border-radius: 35rpx;
                color: #fff;
                text-align: center;
                background-color: #008000;
            }
        }
    }
</style>